<template> 
  <div>
    <div class="app-container">
      <el-card class="operate-container" shadow="never">

        <i class="el-icon-tickets" style="margin-top: 5px"></i>
        <span style="margin-top: 5px">数据列表</span>
        <el-button style="float: right"
                   class="btn-add"
                   @click="addProductAttr()"
                   size="mini">
          添加
        </el-button>
      </el-card>
      <div class="table-container">
        <el-table
          border
          :data="attribute" style="width: 100%">
          <el-table-column type="selection" width="60" align="center"></el-table-column>
          <el-table-column label="属性表Id" width="100">
            <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.id }}</span></template>
          </el-table-column>
          <el-table-column label="商品属性分类id" width="110">
            <template slot-scope="scope"><span style="margin-left: 10px">{{
                scope.row.productAttributeCategoryId
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="名称" width="180">
            <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.name }}</span></template>
          </el-table-column>
          <el-table-column label="属性选择类型：" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px" v-if="scope.row.selectType==0">单选</span>
              <span style="margin-left: 10px" v-if="scope.row.selectType==1">多选</span>
            </template>
          </el-table-column>
          <el-table-column label="属性录入方式：" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px" v-if="scope.row.inputType==0">手工录入</span>
              <span style="margin-left: 10px" v-if="scope.row.inputType==1">从列表中选取</span>
            </template>
          </el-table-column>
          <el-table-column label="可选值列表" width="200">
            <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.inputList }}</span></template>
          </el-table-column>
          <el-table-column label="排序字段" width="180">
            <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.sort }}</span></template>
          </el-table-column>


          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="updateProductAttr(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>





<!--      <div class="pagination-container">-->
<!--        <el-pagination-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--          :current-page="this.productAttributeDTO.pageNum"-->
<!--          :page-sizes="[1, 2, 3, 4, 5]"-->
<!--          :page-size="this.productAttributeDTO.pageSize"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="total">-->
<!--        </el-pagination>-->
<!--      </div>-->
      <div class="batch-operate-container">
        <el-select
          size="small"
          v-model="operateType" placeholder="批量操作">
          <el-option
            v-for="item in operates"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button
          style="margin-left: 20px"
          class="search-button"
          @click="handleBatchOperate()"
          type="primary"
          size="small">
          确定
        </el-button>
      </div>
      <div class="pagination-container">


        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.productAttributeDTO.pageNum"
          :page-sizes="[1, 2, 3, 4, 5]"
          :page-size="this.productAttributeDTO.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,



import {findAttributeList} from "@/api/product/attributeCategory";

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      operateType: null,
      operates: [
        {
          label: "删除",
          value: "deleteProductAttr"
        }
      ],
      attribute: [],
      productAttributeDTO: {
        name: '',
        pageNum: 1,
        pageSize: 3,
        id: this.$route.query.cid
      },
      total: 0,
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    addProductAttr() {
      this.$router.push({
        path: '/product/product/addProductAttribute',
        query: {cid: this.$route.query.cid, type: this.$route.query.type}
      });
    },
    updateProductAttr() {
      this.$router.push({
        path: '/product/product/updateProductAttributeInfo',
        query: {cid: this.$route.query.cid, type: this.$route.query.type}
      });
    },
    findAttribute() {
      console.log(this.productAttributeDTO)
      findAttributeList(this.productAttributeDTO).then(res => {
        console.log(res)
        this.attribute = res.data.list;
        this.total = res.data.total
      })
    },
    handleSizeChange(val) {
      this.productAttributeDTO.pageSize = val
      console.log(`每页 ${val} 条`);
      this.ProductAttributeCategoryList()
    },
    handleCurrentChange(val) {
      this.productAttributeDTO.pageNum = val
      console.log(`当前页: ${val}`);
      this.ProductAttributeCategoryList()
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.findAttribute();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
